<script>
import {defineComponent} from 'vue'
import * as AMapLoader from "@amap/amap-jsapi-loader";
import {allData} from "@/utils/data";


export default defineComponent({
    name: "mapCom",
    data() {
        return {
            objArr: allData,
            lineArr: [[114.49, 38.04], [114.59, 38.04], [114.59, 38.04]]
        }

    },

    methods: {

        AMap() {
            AMapLoader.load({
                key: "b23573c6e7d39b54941c8b5276e1e1d8",       // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0",                 // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.MoveAnimation', 'AMap.MouseTool'],
            })
                .then((AMap) => {
                    // 初始化地图设置地图的中心点
                    const map = new AMap.Map('container', {
                        zoom: 15, //初始地图级别
                        center: [114.520543, 38.039184], //初始地图中心点
                        showIndoorMap: false //关闭室内地图
                    });
                    // 车的巡回导航
                    this.marker = new AMap.Marker({
                        map: map,
                        position: [114.49, 38.04],
                        icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
                        offset: new AMap.Pixel(-13, -26),
                    });
                    new AMap.Polyline({
                        map: map,
                        path: this.lineArr,
                        showDir: true,
                        strokeColor: "#28F",  //线颜色
                        // strokeOpacity: 1,     //线透明度
                        strokeWeight: 6,      //线宽
                        // strokeStyle: "solid"  //线样式
                    });
                    var passedPolyline = new AMap.Polyline({
                        map: map,
                        strokeColor: "#AF5",  //线颜色
                        strokeWeight: 6,      //线宽
                    });
                    this.marker.on('moving', function (e) {
                        passedPolyline.setPath(e.passedPath);
                        map.setCenter(e.target.getPosition(), true)
                    });

                    map.setFitView();
                    // 循环遍历
                    this.objArr.forEach(item =>{

                        if (item.type==0){
                            console.log(item)
                            const companyIcon = new AMap.Icon({
                                // 图标尺寸
                                size: new AMap.Size(50, 50),
                                // 图标的取图地址
                                image: require('../assets/img/house.png'),
                                // 图标所用图片大小
                                imageSize: new AMap.Size(50, 50),
                                // 图标取图偏移量
                                // imageOffset: new AMap.Pixel(50, 50)
                            });
                            const companyMarker = new AMap.Marker({
                                position: new AMap.LngLat(item.lngLat[0],item.lngLat[1]),
                                icon: companyIcon,
                                offset: new AMap.Pixel(-13, -30)
                            });
                            map.add([companyMarker])
                        }

                    })


                    // 设置自定义车标记点的样式
                    const carIcon = new AMap.Icon({
                        // 图标尺寸
                        size: new AMap.Size(50, 50),
                        // 图标的取图地址
                        image: require('../assets/img/车-红.png'),
                        // 图标所用图片大小
                        imageSize: new AMap.Size(50, 50),
                        // 图标取图偏移量
                        // imageOffset: new AMap.Pixel(50, 50)
                    });
                    // 把自定义车的标记点添加到AMap.Marker里面
                    const carMarker = new AMap.Marker({
                        position: new AMap.LngLat(114.520543, 38.039184),
                        icon: carIcon,
                        offset: new AMap.Pixel(-13, -30)
                    });


                    // 自定义帽子的
                    const capIcon = new AMap.Icon({
                        // 图标尺寸
                        size: new AMap.Size(50, 50),
                        // 图标的取图地址
                        image: require('../assets/img/cs_default.png'),
                        // 图标所用图片大小
                        imageSize: new AMap.Size(50, 50),
                        // 图标取图偏移量
                        // imageOffset: new AMap.Pixel(50, 50)
                    });
                    // 把自定义帽子的标记点添加到AMap.Marker里面
                    const capMarker = new AMap.Marker({
                        position: new AMap.LngLat(114.441235, 38.027962),
                        icon: capIcon,
                        offset: new AMap.Pixel(-13, -30)
                    });

                    // 要想添加多个点或者数据时应该为一个数组来存放
                    map.add([carMarker, capMarker]); //添加到地图
                    // 汽车的content的内容
                    var content = [];
                    content.push(`<div class="content">
                                     <table class="contentTab">
                                         <tr>
                                            <td class="tdTitle">经度:</td>
                                             <td class="tdContent">114.546799</td>
                                             <td class="tdTitle">纬度:</td>
                                             <td class="tdContent">36.606659</td>
                                         </tr>
                                         <tr>
                                             <td class="tdTitle">车速:</td>
                                             <td class="tdContent">90 km/h</td>
                                             <td class="tdTitle">发送时间:</td>
                                             <td class="tdContent">2022-05-10 14:55</td>
                                         </tr>
                                         <tr>
                                            <td class="tdTitle">所属企业:</td>
                                             <td class="tdContent">第四公司</td>
                                             <td class="tdTitle">待处理报警个数:</td>
                                             <td class="tdContent">0</td>
                                         </tr>
                                         <tr>
                                             <td class="tdTitle">待处理报警类型:</td>
                                             <td class="tdContent"></td>
                                         </tr>
                                     </table>
                                 </div>
                                 <div class="btn">
                                    <button type="button" class="map-btn">轨迹回放</button>
                                 </div>
                        `)

                    function carInfoWindow() {
                        var info = document.createElement("div");
                        info.className = "info";

                        //可以通过下面的方式修改自定义窗体的宽高

                        // 定义顶部标题
                        var top = document.createElement("div");
                        var titleD = document.createElement("div");
                        var closeX = document.createElement("img");
                        top.className = "info-header";
                        titleD.innerHTML = `<div class="title">车牌号【444444】</div>`;
                        closeX.src = "https://webapi.amap.com/images/close2.gif";
                        closeX.onclick = closeInfoWindow;
                        closeX.className = 'closeButton';

                        top.appendChild(titleD);
                        top.appendChild(closeX);
                        info.appendChild(top);

                        // 定义中部内容
                        var middle = document.createElement("div");
                        middle.className = "info-body";
                        middle.innerHTML = content;
                        info.appendChild(middle);

                        // 定义底部内容
                        var bottom = document.createElement("div");
                        bottom.className = "info-footer";

                        var sharp = document.createElement("img");
                        sharp.src = "https://webapi.amap.com/images/sharp.png";
                        sharp.className = 'footer-img'
                        bottom.appendChild(sharp);
                        info.appendChild(bottom);
                        return info;

                    }

                    // 关闭窗口
                    function closeInfoWindow() {
                        map.clearInfoWindow();
                    }

                    // 创建车的信息窗体
                    const carInfo = new AMap.InfoWindow({
                        isCustom: true,  // 使用自定义窗体
                        content: carInfoWindow(), // 信息窗体的内容可以是任意 html 片段
                        offset: new AMap.Pixel(16, -45)
                    });
                    // 帽子的
                    const capInfo = new AMap.InfoWindow({
                        isCustom: true,  // 使用自定义窗体
                        content: `<div>我是帽子</div>`, // 信息窗体的内容可以是任意 html 片段
                        offset: new AMap.Pixel(16, -45)
                    });


                    const carClick = function (e) {
                        carInfo.open(map, e.target.getPosition()); // 打开信息窗体
                    }
                    const capClick = function (e) {
                        capInfo.open(map, e.target.getPosition()); // 打开信息窗体
                    }
                    capMarker.on('click', capClick)
                    carMarker.on('click', carClick); // 绑定 click 事件

                    //     电子围栏
                    this.mouseTool = new AMap.MouseTool(map)

                    this.mouseTool.on('draw', function (event) {
                        console.log(event.obj._opts.path)  //为绘制出来的覆盖物对象
                        console.log('覆盖物对象绘制完成')
                        var dis = AMap.GeometryUtil.distanceOfLine(event.obj._opts.path);
                        console.log(dis)
                    })

                }).catch((e) => {
                console.error(e);  //加载错误提示
            });


        },
        // 开始、暂停、继续、停止四个按钮进行的事件
        startMove() {
            this.marker.moveAlong(this.lineArr, {
                // 每一段的时长
                duration: 100000,//可根据实际采集时间间隔设置
                // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                autoRotation: true,
            });
        },
        pauseMove() {
            this.marker.pauseMove();
        },
        resumeMove() {
            this.marker.resumeMove();
        },
        stopMove() {
            this.marker.stopMove();
        },
        //绘制电子围栏
        // 多边型
        drawPolygon() {
            this.mouseTool.polygon({
                strokeColor: "#FF33FF",
                strokeOpacity: 1,
                strokeWeight: 6,
                // strokeOpacity: 0.2,
                fillColor: '#1791fc',
                fillOpacity: 0.4,
                // 线样式还支持 'dashed'
                strokeStyle: "solid",
                // strokeStyle是dashed时有效
                // strokeDasharray: [30,10],
            });
        },
        //  矩形
        drawRectangle() {
            this.mouseTool.rectangle({
                strokeColor: 'red',
                strokeOpacity: 0.5,
                strokeWeight: 6,
                fillColor: 'blue',
                fillOpacity: 0.5,
                // strokeStyle还支持 solid
                strokeStyle: 'solid',
                // strokeDasharray: [30,10],
            })
        },
        // 圆形
        drawCircle() {
            this.mouseTool.circle({
                strokeColor: "#FF33FF",
                strokeOpacity: 1,
                strokeWeight: 6,
                // strokeOpacity: 0.2,
                fillColor: '#1791fc',
                fillOpacity: 0.4,
                strokeStyle: 'solid',
                // 线样式还支持 'dashed'
                // strokeDasharray: [30,10],
            })
        },

    },

    mounted() {
        this.AMap()
    },
})
</script>

<template>
    <div>
        <div id="container">

        </div>

        <div class="btns">
            <button @click="startMove">开始</button>
            <button @click="pauseMove">暂停</button>
            <button @click="resumeMove">继续</button>
            <button @click="stopMove">结束</button>
        </div>
        <div class="drawbtn">
            <button @click="drawPolygon">绘制多边形</button>
            <button @click='drawRectangle'>绘制矩形</button>
            <button @click="drawCircle">绘制圆形</button>
        </div>
    </div>
</template>

<style scoped lang="less">
/deep/ * {
  margin: 0;
  padding: 0;
}

/deep/ .btns {
  top: 0;
  left: 0;
  position: fixed;
}

.drawbtn {
  top: 0;
  right: 0;
  position: fixed;
}

/deep/ .info {
  margin: 0 10px;
  box-shadow: 0 3px 14px rgba(0, 0, 100, .6);
  background: #fff;
  padding: 1px;
  text-align: left;
  border: 1px solid silver;
  border-radius: 5px;
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;

  .info-header {
    position: relative;
    background: #fafafa;
    border-bottom: 1px solid #ccc;
    border-radius: 5px 5px 0 0;
    height: 30px;

    .title {
      display: inline-block;
      line-height: 31px;
      padding: 0 10px;
      overflow: hidden;
      z-index: 100;
      cursor: default;
      height: 24px;
      color: #16b;
      font-size: 14px;
      white-space: nowrap;
      text-align: left;
      font-weight: 700;
      width: auto;
      margin-right: 42px;
    }

    .closeButton {
      width: 8px;
      position: absolute;
      top: 10px;
      right: 10px;
      transition-duration: .25s;
    }
  }

  .info-footer {
    position: relative;
    top: 0px;
    margin: 0px auto;
    height: 0;
    width: 100%;
    clear: both;
    text-align: center;
  }
}

/deep/ .info-body {
  background-color: white;
  font-size: 13px;
  line-height: 20px;
  padding: 15px;


}

/deep/ .contentTab {
  color: #930;
  width: 400px;

}

/deep/ .info-body .content .contentTab tr {
  line-height: 1.5;
}

/deep/ .tdTitle {
  text-align: right;
  padding-right: 15px;
  padding-left: 15px;
  font-weight: 700;
  word-break: keep-all;
}

/deep/ .tdContent {
  word-break: keep-all;
  min-width: 120px;
}

/deep/ .info-body .btn {
  margin-top: 6px;
  text-align: right;

}

/deep/ .map-btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #25a5f7;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  background-color: transparent;
  background-image: none;
  color: #25a5f7;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  border-radius: 1rem;
  -webkit-appearance: button;
  cursor: pointer;
}

#container {
  width: 100%;
  height: 100vh;
}

/deep/ table {
  color: #930;
  width: 400px
}

/deep/ table tbody tr td:nth-child(odd) {
  text-align: right;
  padding-right: 15px;
  padding-left: 15px;
  font-weight: 700;
  word-break: keep-all;
}

/deep/ .footer-img {
  position: absolute;
}
</style>